<template>
    <div class="head" style="position: relative;">
        <h3 style="display: inline;">维修系统</h3>
        <div style="display: inline-block;position: absolute; right: 150px;">
            <div style="display: inline-block; margin-right: 20px;">用户名：<span style="cursor: pointer;" @click="showUserInfo">{{ loginUser.username }}</span></div>
            <span style="color: red;cursor: pointer;" @click="logout">退出登陆</span>
        </div>
    </div>
</template>
<script>
export default {
    name: 'Head',
    props:{
        user: Object
    },
    data() {
        return {
            loginUser:{}
        }
    },
    methods: {
        logout() {
            localStorage.removeItem('user')
            this.$message.success('退出成功')
            this.$router.replace('/')
        },
        showUserInfo() {
            this.$emit('showUserInfo')
        },
    },
    created() {
        this.loginUser = this.user
    },
}
</script>
<style lang="css" scoped>
.head{
    width: 100%;
    height: 60px;
    line-height: 60px;
    padding-left: 50px;
    background-color: #409EFF;
}
</style>